<template>
	<view class="container">
		<!-- 活动数据板块 -->
		<view class="activity-section">
			<view class="activity-content" @click="navigateTo('camera')">
				<view class="content-bg"></view>
				<view class="content-overlay"></view>
				<view class="steps-card">
					<text class="main-text">拍照识别健康</text>
					<text class="sub-text">AI智能分析您的健康状况</text>
				</view>
				<view class="avatar-container">
					<view class="camera-icon">
						<text class="iconfont icon-camera"></text>
						<view class="pulse-ring"></view>
					</view>
				</view>
			</view>
			<view class="activity-grid">
				<view class="activity-item red">
					<view class="icon-wrapper">
						<image src="/static/index/calorie.png" class="iconfont" id="iconfont"></image>
					</view>
					<text class="label">卡路里</text>
					<text class="value">{{data.calorie }}</text>
				</view>
				<view class="activity-item  purple">
					<view class="icon-wrapper">
						<image src="/static/index/steps.png" class="iconfont" id="iconfont"></image>
					</view>
					<text class="label">步数</text>
					<text class="value">{{data.step }}</text>
				</view>
				<view class="activity-item blue">
					<view class="icon-wrapper">
						<image src="/static/index/sleep.png" class="iconfont" id="iconfont"></image>
					</view>
					<text class="label">睡眠 </text>
					<text class="value">{{data.totalSleepTime }}</text>
				</view>
			</view>
		</view>
		<!-- 周报板块 -->
		<view class="healthWeeklyReport" @click="navigateTo('healthWeeklyReport')">
			<text class="title">健康周报</text>
			<view class="healthWeeklyReport-icon">
				<image src="/static/index/right.png" class="iconfont icon-heart"></image>
			</view>
		</view>
		<!-- 健康数据板块 -->
		<view class="health-section">
			<view class="health-grid">
				<view class="health-item" @click="navigateTo('heart')">
					<view class="item-header">
						<view class="icon-wrapper red">
							<image src="/static/index/heart-rate.png" class="iconfont icon-heart"></image>
						</view>
						<text class="title">心率</text>
					</view>
					<view class="item-content">
						<text class="value">{{data.currentRestHeartRate }} bpm</text>
						<view class="chart">
							<!-- 这里可以添加心率图表组件 -->
							<image class="mini-chart" src="/static/index/Mask group.png"></image>
						</view>
					</view>
				</view>
				<view class="health-item" @click="navigateTo('sleep')">
					<view class="item-header">
						<view class="icon-wrapper purple">
							<image src="/static/index/sleep.png" class="iconfont icon-heart"></image>
						</view>
						<text class="title">睡眠</text>
					</view>
					<view class="item-content">
						<text class="value">{{data.totalSleepTime }} hrs</text>
						<view class="chart">
							<image class="mini-chart" src="/static/index/sleepcharts.png"></image>
						</view>
					</view>
				</view>
				<view class="health-item" @click="navigateTo('weight')">
					<view class="item-header">
						<view class="icon-wrapper red">
							<image src="/static/index/weight.png" class="iconfont icon-heart"></image>
						</view>
						<text class="title">体重</text>
					</view>
					<view class="item-content">
						<text class="value">{{data.currentWeight}}KG</text>
						<view class="chart">
							<image src="/static/index/weightchart.png" mode="" class="mini-chart"></image>
						</view>
					</view>
				</view>
				<view class="health-item" @click="navigateTo('oxyhemoglobin')">
					<view class="item-header">
						<view class="icon-wrapper red">
							<image src="/static/index/oxyhemoglobin-saturation.png" class="iconfont icon-heart"></image>
						</view>
						<text class="title">血氧</text>
					</view>
					<view class="item-content">
						<text class="value">{{data.currentBo}}%</text>
						<view class="chart">
							<image src="/static/index/blood-oxygen.png" mode="" class="mini-chart"></image>
						</view>
					</view>
				</view>
				<view class="health-item" @click="navigateTo('pressure')">
					<view class="item-header">
						<view class="icon-wrapper blue">
							<image src="/static/index/pressure.png" class="iconfont icon-heart"></image>
						</view>
						<text class="title">压力</text>
					</view>
					<view class="item-content">
						<text class="value">{{data.pressure }}</text>
						<view class="chart ">
							<image src="/static/index/pressurechart.png" mode="" class="mini-chart"></image>
						</view>
					</view>
				</view>
				<view class="health-item" @click="navigateTo('bloodPressure')">
					<view class="item-header">
						<view class="icon-wrapper pink">
							<image src="/static/index/blood-pressure.png" class="iconfont icon-heart"></image>
						</view>
						<text class="title">血压</text>
					</view>
					<view class="item-content">
						<view class="menstrual-info">
							<text>{{data.currentBpValue}}</text>
						</view>
						<view class="chart">
							<image src="/static/index/BloodPressureCharts.png" mode="" class="mini-chart"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		reactive,
	} from 'vue';
	import {
		sendIndexInfo
	} from '../../api/index/index.js';
// import { onLoad } from 'uview-ui/libs/mixin/mixin.js';
	let data = reactive({
		calorie: 0,
		step: 20000,
		totalSleepTime: 0,
		currentWeight: 0,
		currentBo: 0,
		pressure: "无信息",
		currentBpValue: "无信息",
		currentRestHeartRate: 0
	})

	//将获取的微信步数转换为json
	const stepData = {
		"step": data.step
	}
	const step = JSON.stringify(stepData);
	//向后端发送数据数据
	sendIndexInfo(step).then(res => {
		if (res.code == 200) {
			Object.assign(data, res.data);
			console.log("接收后端数据成功！", res.data);
		} else {
			console.log("接收后端数据失败！");
		}
	}).catch(error => {
		console.log("请求首页信息失败！", error)
	})
    onMounted(()=>{
		//判断用户是否登录
		if (!uni.getStorageSync("token")) {
			//弹出提示窗，并跳转登陆页面
			uni.showToast({
				title: "您还未登录，为您跳转登录页",
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateTo({
					url: '/components/login/login'
				})
			}, 2000);
		}
	})
	
	// 页面跳转
	const navigateTo = (page) => {
		uni.navigateTo({
			url: `/components/index/${page}/${page}`
		});
	};

	//获取session_key，用来解密
		// uni.login({
		// 			success: function(res) {
		// 				let appid = 'wx3e40e1fab9ab977d';
		// 				let secret = 'e195a230a0fc30f7dbce7cc9222190f4';
		// 				if (res.code) {
		// 					uni.request({
		// 						url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid +
		// 							'&secret=' + secret + '&js_code=' + res.code +
		// 							'&grant_type=authorization_code',
		// 						header: {
		// 							'content-type': 'application/json'
		// 						},
		// 						success: function(res) {
		// 							let session_key = res.data.session_key;
		// 							getSetupInfo(appid, session_key);
		// 						}
		// 					})
		// 				}
		// 			}
		// 		})

		//获取encryptedData（没有解密的步数）和iv（加密算法的初始向量）
						wx.getWeRunData({
							success:function(res){
								let encryptData = res.encryptedData;
								let iv = res.iv;
								// let pc =new WXBizDataCrypt(appid,session_key);
								// let data = pc.decryptData(encryptData,iv);
							},
							fail:function(res){
								wx.showModal({
										title:'提示',
										content:'获取微信运动步数失败',
										showCancel:false,
										confirmText:'知道了'
									})

							}
						})
</script>

<style>
	/* 全局样式 */
	page {
		background-color: #f8f9fa;
		min-height: 100vh;
	}

	.container {
		padding: 40rpx;
		padding-top: calc(80rpx + var(--status-bar-height));
		box-sizing: border-box;
	}

	.right-icons {
		display: flex;
		gap: 20rpx;
	}

	/* 活动数据板块 */
	.activity-section {
		margin-bottom: 30rpx;
	}

	.activity-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 60rpx;
		background: linear-gradient(135deg, #0088ff, #0055ff);
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		position: relative;
		overflow: hidden;
		cursor: pointer;
		box-shadow: 0 4rpx 20rpx rgba(0, 136, 255, 0.5);
	}

	.content-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background:
			linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent),
			radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
			radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
		animation: shine 3s infinite;
		z-index: 1;
	}

	.content-overlay {
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: linear-gradient(45deg,
				transparent 0%,
				rgba(255, 255, 255, 0.3) 50%,
				transparent 100%);
		transform: rotate(45deg);
		animation: sweep 4s linear infinite;
		z-index: 2;
	}

	@keyframes shine {
		0% {
			opacity: 0.4;
		}

		50% {
			opacity: 0.6;
		}

		100% {
			opacity: 0.4;
		}
	}

	@keyframes sweep {
		0% {
			transform: rotate(45deg) translateX(-100%);
		}

		100% {
			transform: rotate(45deg) translateX(100%);
		}
	}

	.steps-card {
		flex: 1;
		position: relative;
		z-index: 3;
	}

	.main-text {
		font-size: 36rpx;
		color: #ffffff;
		font-weight: 600;
		margin-bottom: 12rpx;
		display: block;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
	}

	.sub-text {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.9);
		display: block;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
	}

	.camera-icon {
		width: 80rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 3;
		backdrop-filter: blur(4px);
	}

	.camera-icon .iconfont {
		font-size: 40rpx;
		color: #ffffff;
		animation: pulse 2s ease-in-out infinite;
	}

	.pulse-ring {
		position: absolute;
		width: 100%;
		height: 100%;
		border: 2rpx solid rgba(255, 255, 255, 0.8);
		border-radius: 50%;
		animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
	}

	@keyframes pulse {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}
	}

	@keyframes pulse-ring {
		0% {
			transform: scale(0.8);
			opacity: 0.5;
		}

		50% {
			transform: scale(1.2);
			opacity: 0.2;
		}

		100% {
			transform: scale(0.8);
			opacity: 0.5;
		}
	}

	.avatar-container {
		position: relative;
		width: 80rpx;
		height: 80rpx;
		z-index: 3;
	}

	.activity-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		/* padding: 0 20rpx; */
	}

	.activity-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx;
		text-align: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	/* 健康周报 */
	.healthWeeklyReport {
		background: linear-gradient(135deg, #5a55ff, #aa55ff);
		color: white;
		border-radius: 16rpx;
		/* margin:20rpx; */
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
	}

	.healthWeeklyReport-icon>image {
		width: 50rpx;
		height: 50rpx;
		padding: 6rpx;
	}

	.health-grid {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 20rpx;
		padding: 20rpx 0rpx;
	}

	.health-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.item-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.icon-wrapper {
		width: 90rpx;
		height: 90rpx;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin-right: 16rpx;
		padding: 10rpx;
	}

	.icon-wrapper>image {
		width: 70rpx;
		height: 70rpx;
	}

	.icon-wrapper.red {
		background: rgba(255, 107, 107, 0.1);
	}

	.icon-wrapper.blue {
		background: rgba(52, 152, 219, 0.1);
	}

	.icon-wrapper.purple {
		background: rgba(155, 89, 182, 0.1);
	}

	.icon-wrapper.pink {
		background: rgba(255, 182, 193, 0.1);
	}

	.activity-item.red {
		background: rgba(255, 107, 107, 0.1);
	}

	.activity-item.blue {
		background: rgba(52, 152, 219, 0.1);
	}

	.activity-item.purple {
		background: rgba(155, 89, 182, 0.1);
	}

	.iconfont {
		font-size: 32rpx;
	}


	.red .iconfont {
		color: #ff6b6b;
	}

	.blue .iconfont {
		color: #3498db;
	}

	.purple .iconfont {
		color: #9b59b6;
	}

	.pink .iconfont {
		color: #ffb6c1;
	}

	.item-content {
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}

	.chart {
		flex: 1;
		height: 100rpx;
		margin-left: 30%;
	}

	.mini-chart {
		height: 100%;
		width: 100%;
	}

	.sleep-bars {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		height: 100%;
	}

	.circular-chart {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		border: 4rpx solid #eee;
	}

	#iconfont {
		transform: translateX(10px);
	}
</style>